<!doctype html>
<html lang="en">
  <head>
    <script src="../../helpers/header.js" type="module"></script>
    <script src="script.js" type="module"></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <h1 class="main__header">
        <span style="color: goldenrod">Q</span>u<span style="color: darksalmon">i</span>z's
        <span style="color: blueviolet">T</span>im<span style="color: crimson">e</span>
      </h1>
    </header>

    <div class="alert__container">
      <div class="correct__alert" id="correct__alert">Good Job!</div>
      <div class="wrong__alert" id="wrong__alert">Sorry! Try again</div>
    </div>

    <section class="loading__container" id="loading__container">
      <img class="loadingGIF" src="./assets/giphy.gif" alt="loading..." />
    </section>

    <section class="main__container" id="main__container">
      <h2 class="emoji">🤔</h2>
      <h1 class="question" id="question"></h1>
      <hr />
      <form class="submitForm" id="submitForm">
        <div class="multiple__container">
          <input type="radio" id="choice_1" name="choices" required />
          <label id="choice1" for="choice_1"> </label>
        </div>
        <div class="multiple__container">
          <input type="radio" id="choice_2" name="choices" required />
          <label id="choice2" for="choice_2"></label>
        </div>
        <div class="multiple__container">
          <input type="radio" id="choice_3" name="choices" required />
          <label id="choice3" for="choice_3"></label>
        </div>
        <div class="multiple__container">
          <input type="radio" id="choice_4" name="choices" required />
          <label id="choice4" for="choice_4"></label>
        </div>
        <button class="btn" type="submit">Submit</button>
      </form>
    </section>
  </body>
</html>
